<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="警令名称" prop="name">
            <el-input v-model.trim="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="警令类型" prop="type">
            <el-select
                    v-model="form.type"
                    style="width: 100%"
                    clearable
                    @clear="form.type = ''"
                  >
              <el-option v-for="item in typeAllList" :key="item.id" :label="item.name" :value="item.id"></el-option>
<!--                  <el-option-->
<!--                      label="请选择发布状态"-->
<!--                      value="1"-->
<!--                    ></el-option>-->
<!--                    <el-option-->
<!--                      label="未发布"-->
<!--                      value="1"-->
<!--                    ></el-option>-->
<!--                    <el-option-->
<!--                      label="已发布"-->
<!--                      value="2"-->
<!--                    ></el-option>                  -->
                  </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="警令内容" prop="content">
            <el-input v-model.trim="form.content" type="textarea" :rows="5"></el-input>
          </el-form-item>
        </el-col>


        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="协同时限" prop="expirationTime">
            <el-date-picker
                v-model.trim="form.expirationTime"
                type="datetime"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>


        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="附件上传" prop="fujian">
            <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false"
                       :on-change="onChangePicture" :on-remove="handleRemovePicture" :multiple="true" :file-list="pictureList"
                       :before-remove="beforeRemove" :data="form">
              <el-button size="small" icon="el-icon-upload2" type="primary">
                文件上传
              </el-button>
              <div slot="tip" class="el-upload__tip">
                附件大小上限：5.0MB
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">{{ loading ? '确定中 ...' : '确 定' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {typeList,save,getById} from "@/api/warningOrder";

export default {
  name: 'Edit',
  data() {
    return {
      pictureList: [],
      form: {
        id: '',
        name: '',
        type: '',
        content: '',
        expirationTime: '',
        discriminate: 0,
        delIds: [],
      },
      rules: {
         name: [{ required: true, trigger: 'blur', message: '请输入警令名称' },],
         type: [{ required: true, trigger: 'submit', message: '请选择警令类型' },],
         content: [{ required: true, trigger: 'blur', message: '请输入警令内容' },],
         expirationTime: [{ required: true, trigger: 'blur', message: '请选择协同时限' },],
      },
      title: '',
      typeAllList: [],
      dialogFormVisible: false,
      loading: false,
      disabled: false,
      pickerOptions: {
        //设置禁用状态，参数为当前日期
        disabledDate(time) {
          // return time.getTime() < Date.now(); //当天不可选
          return time.getTime() < new Date().getTime() - 86400000; //  - 86400000是否包括当天
        },
        // //控制时分秒不可选
        // selectableRange: (() => {
        //   let data = new Date();
        //   let hour = data.getHours();
        //   let minute = data.getMinutes();
        //   let second = data.getSeconds();
        //   return [`${hour}:${minute}:${second} - 23:59:59`];
        // })()
      },
    }
  },
  created() { },
  methods: {
    showDia(row) {
      //获取所有警令类型
      this.typeList()
      if (!row) {
        this.title = '添加'
      } else {
        this.title = '编辑'
        this.form = Object.assign({}, row)
        this.getOneInfo();
      }
      this.dialogFormVisible = true
    },
    handleChange(value) {
      let cityNames = []
      value.forEach((e) => {
        cityNames.push(CodeToText[e])
      })
      this.citys = cityNames.join('/')
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.pictureList = [];
      this.dialogFormVisible = false
    },
    save() {
      console.log("form",this.form);

      if (this.loading) {
        return
      }
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.disabled = true


          const params = new FormData()

          for (let i = 0; i < this.pictureList.length; i++) {
            const f = this.pictureList[i]
            params.append('file', f.raw)
          }
          params.append('body', JSON.stringify(this.form))

          save(params).then((res) => {
            console.log('res',res);
            if(res.code == 0){
              this.timer = setTimeout(() => {
                setTimeout(() => {
                  this.loading = false
                  this.disabled = false
                }, 400)
              this.$baseMessage("成功", 'success')
              this.$emit('fetch-data')
              this.close()
              }, 2000)
            }else {
              this.timer = setTimeout(() => {
                setTimeout(() => {
                  this.loading = false
                  this.disabled = false
                }, 400)
              this.$baseMessage(res.msg, 'error')
              }, 2000)
            }
          });
        } else {
          return false
        }
      })
    },
    //获取所有警令类型
    async typeList() {
      const { data } = await typeList();
      this.typeAllList = data;
    },
    //ID查询
    async getOneInfo(){
      const { data } = await getById(this.form);
      console.log("data",data);
      this.form = data;
      this.pictureList = data.files;
    },
    onChangePicture(file, fileList) {
      this.pictureList = fileList;
    },
    handleRemovePicture(file, fileList) {
      this.pictureList = fileList
    },
    beforeRemove(file, fileList) {
      if (undefined == this.form.delIds) {
        this.form.delIds = [];
      }
      this.form.delIds.push(file.id);
    }
  },
}
</script>
